<template>
	<view class="page-wrapper">
		<view class="content">
			<!-- 顶部装饰背景 -->
			<view class="header-bg"></view>
			
			<!-- Logo区域 -->
			<view class="logo-container">
				<view class="logo-wrapper">
					<image class="logo" src="/static/logo2.jpg"></image>
				</view>
				<view class="text-area">
					<text class="title">{{title}}</text>
					<text class="subtitle">欢迎使用产品使用调查反馈小程序</text>
				</view>
			</view>
			
			<!-- 用户意见反馈表单 -->
			<view class="feedback-container">
				<view class="feedback-header">
					<view class="feedback-icon">💬</view>
					<view class="feedback-title">产品使用调查反馈</view>
					<view class="feedback-subtitle">您的意见是我们前进的动力</view>
				</view>
			
			<view class="form-item name-item">
				<view class="form-label">
					<text class="label-icon">👤</text>
					<text class="label">姓名</text>
				</view>
				<input class="input" v-model="feedbackForm.name" placeholder="请输入您的姓名" />
			</view>
			
			<view class="form-item contact-item">
				<view class="form-label">
					<text class="label-icon">📱</text>
					<text class="label">联系方式</text>
				</view>
				<input class="input" v-model="feedbackForm.contact" placeholder="请输入手机号或邮箱" />
			</view>
			
			<view class="form-item type-item">
				<view class="form-label">
					<text class="label-icon">🏷️</text>
					<text class="label">反馈类型</text>
				</view>
				<picker @change="onFeedbackTypeChange" :value="feedbackTypeIndex" :range="feedbackTypes">
					<view class="picker">
						<text>{{feedbackTypes[feedbackTypeIndex]}}</text>
						<text class="picker-arrow">▼</text>
					</view>
				</picker>
			</view>
			
			<view class="form-item description-item">
				<view class="form-label">
					<text class="label-icon">✍️</text>
					<text class="label">详细描述</text>
				</view>
				<textarea 
					class="textarea" 
					v-model="feedbackForm.description" 
					placeholder="请详细描述您的意见或建议..."
					maxlength="500"
				></textarea>
				<text class="char-count">{{feedbackForm.description.length}}/500</text>
			</view>
			
			<view class="form-item image-item">
				<view class="form-label">
					<text class="label-icon">📷</text>
					<text class="label">问题截图</text>
				</view>
				<view class="image-upload">
					<view 
						class="upload-btn" 
						@click="chooseImage"
						v-if="feedbackForm.images.length < 3"
					>
						<text class="upload-icon">📸</text>
						<text class="upload-text">添加图片</text>
					</view>
					<view 
						class="image-item-wrapper" 
						v-for="(image, index) in feedbackForm.images" 
						:key="index"
					>
						<image :src="image" @click="previewImage(image)"></image>
						<view class="delete-btn" @click="deleteImage(index)">×</view>
					</view>
				</view>
				<text class="tip">💡 最多上传3张图片，帮助我们更好地了解问题</text>
			</view>
			
			<button class="submit-btn" @click="submitFeedback">
				<text class="submit-text">✨ 提交反馈</text>
			</button>
		</view>
	</view>
</view>
</template>

<script>
	// 引入uniCloud服务类
	import uniCloudService from '@/utils/uniCloudService.js'
	
	export default {
		data() {
			return {
				title: 'Hello',
				feedbackForm: {
					name: '',
					contact: '',
					type: '',
					description: '',
					images: []
				},
				feedbackTypes: ['功能建议', '问题反馈', '使用体验', '其他'],
				feedbackTypeIndex: 0,
				isNetworkAvailable: true // 网络状态标识
			}
		},
		async onLoad() {
			// 检查网络状态
			await this.checkNetwork();
			
			// 初始化uniCloud
			uniCloudService.init();
		},
		methods: {
			// 检查网络状态
			async checkNetwork() {
				try {
					const networkStatus = await uniCloudService.checkNetworkStatus();
					this.isNetworkAvailable = networkStatus.isConnected;
					
					if (!networkStatus.isConnected) {
						uni.showToast({
							title: '网络连接不可用',
							icon: 'none',
							duration: 3000
						});
					}
					
					console.log('网络状态:', networkStatus);
				} catch (error) {
					console.error('检查网络状态失败:', error);
				}
			},
			
			// 反馈类型选择
			onFeedbackTypeChange(e) {
				this.feedbackTypeIndex = e.detail.value;
				this.feedbackForm.type = this.feedbackTypes[e.detail.value];
			},
			
			// 选择图片
			chooseImage() {
				uni.chooseImage({
					count: 3 - this.feedbackForm.images.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.feedbackForm.images = this.feedbackForm.images.concat(res.tempFilePaths);
					},
					fail: (err) => {
						console.log('选择图片失败', err);
					}
				});
			},
			
			// 预览图片
			previewImage(current) {
				uni.previewImage({
					current: current,
					urls: this.feedbackForm.images
				});
			},
			
			// 删除图片
			deleteImage(index) {
				this.feedbackForm.images.splice(index, 1);
			},
			
			// 提交反馈
			async submitFeedback() {
				// 表单验证
				if (!this.feedbackForm.name.trim()) {
					uni.showToast({
						title: '请输入姓名',
						icon: 'none'
					});
					return;
				}
				
				if (!this.feedbackForm.contact.trim()) {
					uni.showToast({
						title: '请输入联系方式',
						icon: 'none'
					});
					return;
				}
				
				// 联系方式格式验证
				const phoneRegex = /^1[3-9]\d{9}$/;
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				if (!phoneRegex.test(this.feedbackForm.contact) && !emailRegex.test(this.feedbackForm.contact)) {
					uni.showToast({
						title: '请输入正确的手机号或邮箱',
						icon: 'none'
					});
					return;
				}
				
				if (!this.feedbackForm.description.trim()) {
					uni.showToast({
						title: '请输入详细描述',
						icon: 'none'
					});
					return;
				}
				
				// 确保反馈类型已选择
				if (!this.feedbackForm.type) {
					this.feedbackForm.type = this.feedbackTypes[this.feedbackTypeIndex];
				}
				
				// 检查网络状态
				if (!this.isNetworkAvailable) {
					await this.checkNetwork();
					if (!this.isNetworkAvailable) {
						uni.showToast({
							title: '网络连接不可用，请检查网络设置',
							icon: 'none',
							duration: 3000
						});
						return;
					}
				}
				
				// 显示加载提示
				uni.showLoading({
					title: '提交中...'
				});
				
				try {
					// 使用uniCloud服务调用云函数
					const result = await uniCloudService.callFunction('feedbackSubmit', {
						name: this.feedbackForm.name.trim(),
						contact: this.feedbackForm.contact.trim(),
						type: this.feedbackForm.type,
						description: this.feedbackForm.description.trim(),
						images: this.feedbackForm.images
					});
					
					console.log('云函数调用结果:', result);
					
					// 隐藏加载提示
					uni.hideLoading();
					
					if (result.result && result.result.code === 200) {
						// 提交成功
						uni.showToast({
							title: result.result.message || '提交成功',
							icon: 'success',
							duration: 2000
						});
						
						// 重置表单
						this.resetForm();
					} else {
						// 提交失败，显示详细错误信息
						console.error('云函数返回错误:', result.result);
						let errorMsg = '提交失败';
						
						if (result.result) {
							errorMsg = result.result.message || '未知错误';
							// 如果有调试信息，也打印出来
							if (result.result.debug) {
								console.error('错误调试信息:', result.result.debug);
								// 在开发环境可以显示更详细的错误
								errorMsg += ` (${result.result.debug.errorType}: ${result.result.debug.errorMessage})`;
							}
						}
						
						uni.showToast({
							title: errorMsg,
							icon: 'none',
							duration: 5000
						});
					}
					
				} catch (error) {
					console.error('提交失败:', error);
					
					// 隐藏加载提示
					uni.hideLoading();
					
					// 显示错误提示
					uni.showToast({
						title: error.message || '网络错误，请检查网络连接',
						icon: 'none',
						duration: 3000
					});
				}
			},
			
			// 重置表单
			resetForm() {
				this.feedbackForm = {
					name: '',
					contact: '',
					type: '',
					description: '',
					images: []
				};
				this.feedbackTypeIndex = 0;
			}
		}
	}
</script>

<style>
	/* 页面整体包装器 */
	.page-wrapper {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		position: relative;
		overflow: hidden;
	}
	
	/* 顶部装饰背景 */
	.header-bg {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 400rpx;
		background: linear-gradient(135deg, #ff9a9e 0%, #fecfef 50%, #fecfef 100%);
		border-radius: 0 0 50rpx 50rpx;
		opacity: 0.8;
	}
	
	.content {
		position: relative;
		z-index: 2;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 40rpx 20rpx;
		min-height: 100vh;
	}

	/* Logo容器美化 */
	.logo-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 50rpx;
		animation: fadeInDown 1s ease-out;
	}
	
	.logo-wrapper {
		background: linear-gradient(135deg, #ff6b6b, #feca57);
		padding: 20rpx;
		border-radius: 50%;
		box-shadow: 0 10rpx 30rpx rgba(255, 107, 107, 0.3);
		margin-bottom: 30rpx;
		transform: perspective(1000rpx) rotateX(10deg);
	}

	.logo {
		height: 120rpx;
		width: 120rpx;
		border-radius: 50%;
		display: block;
	}

	.text-area {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.title {
		font-size: 48rpx;
		font-weight: bold;
		background: linear-gradient(135deg, #667eea, #764ba2);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		font-size: 24rpx;
		color: rgba(255, 255, 255, 0.8);
		font-weight: 300;
	}
	
	/* 反馈表单容器美化 */
	.feedback-container {
		width: 100%;
		max-width: 700rpx;
		background: rgba(255, 255, 255, 0.95);
		border-radius: 30rpx;
		padding: 50rpx 40rpx;
		box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.1);
		backdrop-filter: blur(20rpx);
		animation: fadeInUp 1s ease-out 0.3s both;
	}
	
	.feedback-header {
		text-align: center;
		margin-bottom: 50rpx;
	}
	
	.feedback-icon {
		font-size: 60rpx;
		margin-bottom: 20rpx;
		animation: bounce 2s infinite;
	}
	
	.feedback-title {
		font-size: 36rpx;
		font-weight: bold;
		background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		background-clip: text;
		-webkit-background-clip: text;
		color: transparent;
		margin-bottom: 10rpx;
	}
	
	.feedback-subtitle {
		font-size: 24rpx;
		color: #666;
		opacity: 0.8;
	}
	
	/* 表单项美化 */
	.form-item {
		margin-bottom: 40rpx;
		animation: slideInLeft 0.8s ease-out;
	}
	
	.form-label {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.label-icon {
		font-size: 32rpx;
		margin-right: 15rpx;
	}
	
	.label {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}
	
	/* 输入框美化 */
	.input {
		width: 100%;
		height: 90rpx;
		border: none;
		border-radius: 20rpx;
		padding: 0 25rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
		background-size: 200% 200%;
		animation: gradientShift 3s ease infinite;
		color: white;
		transition: all 0.3s ease;
	}
	
	.input::placeholder {
		color: rgba(255, 255, 255, 0.7);
	}
	
	.input:focus {
		transform: translateY(-2rpx);
		box-shadow: 0 10rpx 30rpx rgba(240, 147, 251, 0.4);
	}
	
	/* 选择器美化 */
	.picker {
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		padding: 0 25rpx;
		font-size: 28rpx;
		background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		transition: all 0.3s ease;
	}
	
	.picker:active {
		transform: scale(0.98);
	}
	
	.picker-arrow {
		font-size: 20rpx;
		color: #666;
	}
	
	/* 文本域美化 */
	.textarea {
		width: 100%;
		min-height: 180rpx;
		border: none;
		border-radius: 20rpx;
		padding: 25rpx;
		font-size: 28rpx;
		box-sizing: border-box;
		background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
		resize: none;
		transition: all 0.3s ease;
	}
	
	.textarea::placeholder {
		color: rgba(102, 102, 102, 0.7);
	}
	
	.textarea:focus {
		transform: translateY(-2rpx);
		box-shadow: 0 10rpx 30rpx rgba(252, 182, 159, 0.4);
	}
	
	.char-count {
		display: block;
		text-align: right;
		font-size: 24rpx;
		color: #999;
		margin-top: 15rpx;
		font-weight: 300;
	}
	
	/* 图片上传区域美化 */
	.image-upload {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-bottom: 15rpx;
	}
	
	.upload-btn {
		width: 160rpx;
		height: 160rpx;
		border: 3rpx dashed rgba(102, 126, 234, 0.4);
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
		transition: all 0.3s ease;
	}
	
	.upload-btn:active {
		transform: scale(0.95);
		background: linear-gradient(135deg, #bbdefb 0%, #90caf9 100%);
	}
	
	.upload-icon {
		font-size: 40rpx;
		margin-bottom: 5rpx;
	}
	
	.upload-text {
		font-size: 20rpx;
		color: #666;
	}
	
	.image-item-wrapper {
		position: relative;
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
	}
	
	.image-item-wrapper image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.delete-btn {
		position: absolute;
		top: -5rpx;
		right: -5rpx;
		width: 40rpx;
		height: 40rpx;
		background: linear-gradient(135deg, #ff6b6b, #ee5a24);
		color: #fff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 24rpx;
		box-shadow: 0 3rpx 10rpx rgba(255, 107, 107, 0.4);
		transition: all 0.3s ease;
	}
	
	.delete-btn:active {
		transform: scale(0.9);
	}
	
	.tip {
		font-size: 24rpx;
		color: #666;
		line-height: 1.5;
		opacity: 0.8;
	}
	
	/* 提交按钮美化 */
	.submit-btn {
		width: 100%;
		height: 100rpx;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: #fff;
		border: none;
		border-radius: 50rpx;
		font-size: 32rpx;
		font-weight: bold;
		margin-top: 40rpx;
		box-shadow: 0 15rpx 35rpx rgba(102, 126, 234, 0.4);
		transition: all 0.3s ease;
		position: relative;
		overflow: hidden;
	}
	
	.submit-btn:active {
		transform: translateY(2rpx);
		box-shadow: 0 10rpx 25rpx rgba(102, 126, 234, 0.3);
	}
	
	.submit-btn::before {
		content: '';
		position: absolute;
		top: 0;
		left: -100%;
		width: 100%;
		height: 100%;
		background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
		transition: left 0.5s ease;
	}
	
	.submit-btn:active::before {
		left: 100%;
	}
	
	.submit-text {
		position: relative;
		z-index: 1;
	}
	
	/* 动画效果 */
	@keyframes fadeInDown {
		from {
			opacity: 0;
			transform: translateY(-30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(30rpx);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
	
	@keyframes slideInLeft {
		from {
			opacity: 0;
			transform: translateX(-30rpx);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	
	@keyframes bounce {
		0%, 20%, 50%, 80%, 100% {
			transform: translateY(0);
		}
		40% {
			transform: translateY(-10rpx);
		}
		60% {
			transform: translateY(-5rpx);
		}
	}
	
	@keyframes gradientShift {
		0% {
			background-position: 0% 50%;
		}
		50% {
			background-position: 100% 50%;
		}
		100% {
			background-position: 0% 50%;
		}
	}
	
	/* 响应式设计 */
	@media (max-width: 750rpx) {
		.feedback-container {
			margin: 0 20rpx;
			padding: 40rpx 30rpx;
		}
		
		.logo {
			height: 100rpx;
			width: 100rpx;
		}
		
		.title {
			font-size: 40rpx;
		}
	}
</style>
